<template>
    <div>
      <div><center><h1>流程节点样式创建</h1></center></div>
      <div>
          请选择流程：<el-select v-model="process_id" placeholder="请选择流程" @change="getPoint">
                        <el-option
                        v-for="item in lst"
                        :key="item.id"
                        :label="item.process"
                        :value="item.id">
                        </el-option>
                    </el-select>   
      </div>
      <div>
          请选择节点：<el-select v-model="point_id" placeholder="请选择节点">
                        <el-option
                        v-for="item in lst1"
                        :key="item.id"
                        :label="item.point"
                        :value="item.id">
                        </el-option>
                    </el-select>   
      </div>
      <div>
          <span v-for="i in size" :key="i">
        <el-form label-position="left" label-width="80px">
          <el-form-item label="">
            <el-row :gutter="10">
              <el-col :span="15">
                <div>
                    请选择样式：<el-select v-model="style_list[i]" placeholder="请选择样式">
                                    <el-option
                                    v-for="item in lst2"
                                    :key="item.id"
                                    :label="item.attr"
                                    :value="item.id">
                                    </el-option>
                                </el-select>   
                </div>
              </el-col>
              <el-col :span="2"><el-button @click="size_up">+</el-button></el-col>
              <el-col :span="2"
                ><el-button @click="size_down">-</el-button></el-col
              >
            </el-row>
          </el-form-item>
        </el-form>
      </span>
      </div>
      <div><center><el-button @click="create">确认创建</el-button></center></div>
    </div>
  </template>
  
  <script>
  export default {
  data(){
      return{
          lst:[],
          lst1:[],
          lst2:[],
          size:1,
          process_id:'',
          
          point_id:'',
          style_list:{}
      }
  },
  mounted(){
      this.getPro()
      
      this.getAttr()
  },
  methods:{
      getPro(){
          this.$axios.get('process/api/v1/process/')
          .then(res=>{
              console.log(res)
              if (res.data.code == 200){
                  this.lst = res.data.data
              }
          })
      },
      getPoint(){
          this.$axios.get('process/api/v1/point/'+this.process_id+'/')
          .then(res=>{
              console.log(res)
              if (res.data.code == 200){
                  this.lst1 = res.data.data
              }
          })
      },
      getAttr(){
          this.$axios.get('process/api/v1/attr/')
          .then(res=>{
              console.log(res)
              if (res.data.code == 200){
                  this.lst2 = res.data.data
              }
          })
      },
      size_up() {
        this.size += 1;
      },
      size_down() {
        var aa = "";
        if (this.size > 1) {
          aa = this.size;
          console.log(aa);
          this.style_list[aa] = "";
          this.size -= 1;
        }
      },
      create(){
          this.$axios.post('process/api/v1/style/',{
            process_id:this.process_id,
            point_id:this.point_id,
            style_list:this.style_list
          })
          .then(res=>{
              console.log(res)
              if (res.data.code == 200){
                  alert(res.data.msg)
              }
          })
      }
        
      }
  }
  
  </script>
  
  <style>
  
  </style>